<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
        <link rel="preload" href="/node_modules/@perspective-dev/server/dist/wasm/perspective-server.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
        <link rel="preload" href="/node_modules/@perspective-dev/viewer/dist/wasm/perspective-viewer.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
        <link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@perspective-dev/viewer/dist/css/pro.css" />
        <link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@perspective-dev/workspace/dist/css/pro.css" />
        <style>
            perspective-workspace {
                left: 0;
                position: absolute;
                top: 0;
                bottom: 0;
                right: 0;
            }

            perspective-viewer[theme="Pro Light"] {
                --d3fc-positive--gradient: linear-gradient(#94d0ff, #8795e8, #966bff, #ad8cff, #c774e8, #c774a9, #ff6ad5, #ff6a8b, #ff8b8b, #ffa58b, #ffde8b, #cdde8b, #8bde8b, #20de8b);
            }
        </style>
    </head>
    <body>
        <perspective-workspace id="workspace"></perspective-workspace>
        <script type="module">
            import "/node_modules/@perspective-dev/viewer/dist/cdn/perspective-viewer.js";
            import "/node_modules/@perspective-dev/workspace/dist/cdn/perspective-workspace.js";
            import "/node_modules/@perspective-dev/viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js";
            import "/node_modules/@perspective-dev/viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js";

            import perspective from "/node_modules/@perspective-dev/client/dist/cdn/perspective.js";

            const datasource = async () => {
                const request = fetch("./olympics.arrow");
                const worker = await perspective.worker();
                const response = await request;
                const arrow = await response.arrayBuffer();
                const table = await worker.table(arrow);
                return table;
            };

            window.workspace.tables.set("olympics", datasource());
            window.workspace.restore({
                sizes: [1],
                detail: {
                    main: {
                        type: "tab-area",
                        widgets: ["PERSPECTIVE_GENERATED_ID_1", "PERSPECTIVE_GENERATED_ID_0"],
                        currentIndex: 1,
                    },
                },
                mode: "globalFilters",
                viewers: {
                    PERSPECTIVE_GENERATED_ID_1: {
                        plugin: "X/Y Scatter",
                        title: "Avg Height vs Weight by Sport",
                        group_by: ["Sport"],
                        columns: ["Height", "Weight", null, "City", null, "Sport", null],
                        filter: [["Height", "==", null]],
                        sort: [["Name", "desc"]],
                        expressions: {},
                        aggregates: {
                            Name: "distinct count",
                            Weight: "avg",
                            Sport: "dominant",
                            Height: "avg",
                        },
                        table: "olympics",
                    },
                    PERSPECTIVE_GENERATED_ID_0: {
                        plugin: "Heatmap",
                        title: "Age Distribution by Sport",
                        group_by: ["Age"],
                        split_by: ["Sport"],
                        columns: ["Name"],
                        filter: [
                            ["Medal", "!=", "NA"],
                            ["Age", "is not null", null],
                        ],
                        sort: [["Name", "col asc"]],
                        expressions: {},
                        aggregates: {
                            Age: "avg",
                        },
                        table: "olympics",
                    },
                },
            });
        </script>
    </body>
</html>
